/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* fade-left */
.fade-left-leave-active,
.fade-left-enter-active {
  transition: all 0.3s ease-in-out;
}

.fade-left-enter-from {
  transform: translateX(-30px);
  opacity: 0;
}

.fade-left-leave-to {
  transform: translateX(30px);
  opacity: 0;
}

/* fade-right */
.fade-right-leave-active,
.fade-right-enter-active {
  transition: all 0.3s ease-in-out;
}

.fade-right-enter-from {
  transform: translateX(30px);
  opacity: 0;
}

.fade-right-leave-to {
  transform: translateX(-30px);
  opacity: 0;
}

/* ///////////////////////////////////////////// */

/* Fade Top */

/* ///////////////////////////////////////////// */
.fade-top-enter-active,
.fade-top-leave-active {
  transition: opacity 0.2s, transform 0.25s;
}

.fade-top-enter-from {
  transform: translateY(8%);
  opacity: 0;
}

.fade-top-leave-to {
  transform: translateY(-8%);
  opacity: 0;
}

/* ///////////////////////////////////////////// */

/* Fade Bottom */

/* ///////////////////////////////////////////// */
.fade-bottom-enter-active,
.fade-bottom-leave-active {
  transition: opacity 0.25s, transform 0.3s;
}

.fade-bottom-enter-from {
  transform: translateY(-10%);
  opacity: 0;
}

.fade-bottom-leave-to {
  transform: translateY(10%);
  opacity: 0;
}

/* zoom-in */
.zoom-in-enter-active,
.zoom-in-leave-active {
  transition: transform 0.2s, opacity 0.3s ease-out;
}

.zoom-in-enter-from {
  transform: scale(0.92);
  opacity: 0;
}

.zoom-in-leave-to {
  transform: scale(1.06);
  opacity: 0;
}

/* zoom-out */
.zoom-out-leave-active,
.zoom-out-enter-active {
  transition: all 0.28s;
}

.zoom-out-enter-from {
  transform: scale(1.2);
  opacity: 0;
}

.zoom-out-leave-to {
  transform: scale(0.8);
  opacity: 0;
}

/* zoom */
.zoom-enter-active,
.zoom-leave-active {
  transition: all 0.28s;
}

.zoom-enter-from,
.zoom-leave-to {
  transform: scale(0.5);
  opacity: 0;
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all 0.5s;
}

.breadcrumb-enter-from,
.breadcrumb-leave-active {
  transform: translateX(20px);
  opacity: 0;
}

.breadcrumb-leave-active {
  position: absolute;
}
